<template>
  <el-dialog
    title="上传文件夹"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-loading="loading" element-loading-text="文件上传中">
      <div style="margin-bottom: 10px">
        <el-button type="primary" :disabled="fileList.length === 0" @click="handleUpload">确认上传</el-button>
        <el-button @click="handleClean">清空</el-button>
      </div>

      <div
        id="dragArea"
        :class="{ 'drag-enter-animation': isDraggingOver }"
        @dragenter="handleDragEnter"
        @dragover="handleDragOver"
        @dragleave="handleDragLeave"
        @drop="handleDrop"
      >
        拖拽文件夹到此处上传
      </div>
      <el-table :data="fileList" style="width: 100%" height="500">
        <el-table-column prop="name" label="名称" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="fullPath" label="完整路径" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'UploadFolder',

  data() {
    return {
      loading: false,
      dialogVisible: false,
      fileList: [],
      isDraggingOver: false
    }
  },

  mounted() {},

  methods: {
    is() {
      this.fileList = []
      this.dialogVisible = true
    },
    handleDragEnter(event) {
      event.preventDefault()
      this.isDraggingOver = true
    },
    handleDragLeave() {
      this.isDraggingOver = false // 离开拖拽区域时，设置状态为 false
    },
    handleDragOver(event) {
      event.preventDefault()
    },
    handleDrop(event) {
      event.preventDefault()
      this.isDraggingOver = false
      const files = event.dataTransfer.items || event.dataTransfer.files
      // console.log(files)

      for (let i = 0; i < files.length; i++) {
        const file = files[i].webkitGetAsEntry()
        // console.log(file)
        if (file.isDirectory) {
          this.traverseDirectory(file)
        } else {
          // 处理单个文件
          this.fileList.push(file)
        }
      }
    },
    traverseDirectory(directory) {
      const reader = directory.createReader()
      // console.log(reader)
      reader.readEntries(
        (entries) => {
          // console.log(entries)
          entries.forEach((entry) => {
            // console.log(entry)
            if (entry.isDirectory) {
              this.traverseDirectory(entry)
            } else {
              // 处理文件夹中的文件
              this.fileList.push(entry)
            }
          })
        },
        (err) => {
          console.log(err)
        }
      )
    },

    handleUpload() {
      this.loading = true
      this.$emit('uploadFolder', this.fileList)
    },
    handleClean() {
      this.fileList = []
    },
    handleClose() {
      this.loading = false
      this.fileList = []
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/element-variables.scss';
#dragArea {
  width: 100%;
  height: 150px;
  border: 1px dashed #b9c8dc;
  line-height: 150px;
  text-align: center;
}
.drag-enter-animation {
  transition: all 0.1s linear;
  border: 2px dashed $--color-primary !important;
}
</style>
